<template>
	<view class="newfriend-module">
		<u-navbar :title="$t('contacts.New-Friends')" :autoBack="false" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true" @leftClick="gotoBack">
		</u-navbar>
		<!--  <view class="search-content">
      <u-input
        placeholder="Search"
        v-model="userName"
        placeholderClass="placeholderClass"
        border="none"
        inputAlign="center"
        shape="circle"
        :customStyle="{
          background: '#fff',
          height: '76rpx',
          padding: '0 38rpx',
          'font-size': '26rpx',
        }"
      ></u-input>
      <view class="iconfont icon-sousuo serch-icon" v-show="!userName"></view>
    </view>
    <view class="createGroup"  @click="handleToPage('/pages/friends/addFriends')">
      <view class="iconfont icon-xinzenghaoyou create-icon"> </view>
      <text>Add a Contact</text>
    </view> -->
		<view class="recently">{{$t('contacts.Recently-Added')}}</view>

		<scroll-view scroll-y="true" :style="`max-height: calc(${WindowInfo.windowHeight}px - 80rpx - 44px)`"
			@scrolltolower="lower">
			<view class="item" v-for="(item, index) in friendsList" v-if="friendsList.length > 0" :key="index" @click="
        handleToPage(
          `/pages/chat/PersonalChat?targetId=${item.userVo.userId}&commentName=${item.commentName}&id=${item.id}`
        )
      ">
				<view class="name-view" v-if="item.userVo">
					<!-- <image :src="item.userVo.avatar" class="friends-icon" /> -->
					<image :src="item.userVo.avatarCompress || item.userVo.avatar" class="friends-icon" v-if="isPeopleAvatarExit(item.userVo.avatarCompress || item.userVo.avatar)" mode="aspectFill"></image>
					<view v-else class="friends-icon avator-font-setting" :style="{ background: `${item.defaultColor}`, fontSize: '30upx' }">{{ formatUserName(item).slice(0, 1) }}</view>
					<view class="userName">{{ formatUserName(item) }}</view>
				</view>
				<view class="time">{{ formatDayTime(item.createTime) }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryFriendsList
	} from "@/services/friends";
	import {
		formatUserInfo
	} from "@/utils/index";
	export default {
		data() {
			return {
				userName: "",
				friendsList: [],
				WindowInfo: '',
				params: {
					pageNum: 1,
					pageSize: 15
				},
				total: 0
			};
		},
		methods: {
			// 返回上一页
			gotoBack() {
				uni.switchTab({
					url: '/pages/friends/Friends'
				});
			},
			lower() {
				if (this.params.pageNum * this.params.pageSize >= this.total) {
					return
				} else {
					this.params.pageNum ++
					this.getFriendsList(1)
				}
				console.log('滚动到底部了');
			},
			async getFriendsList(val) {
				const req = {
					...this.params,
					orderByColumn: 'createTime',
					isAsc: 'desc'
				}
				const resp = await queryFriendsList(req);
				console.log(resp);
				if (!resp.success) return;
				this.total = resp.result.total
				const list = resp.result.rows.map(item => {
					item = formatUserInfo(item)
					return item
				})

				if (val) {
					this.friendsList = [...this.friendsList, ...list.filter((o) => o.userVo != null)]
				} else {
					this.friendsList = list.filter((o) => o.userVo != null);
				}

				console.log(this.friendsList, "chnegyuan");
			},
			handleToPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// 格式化时间
			formatDayTime(date) {
				date = new Date(date);
				const year = date.getFullYear();
				const month =
					date.getMonth() + 1 < 10 ?
					`0${date.getMonth() + 1}` :
					date.getMonth() + 1;
				const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
				return `${year}/${month}/${day}`;
			},
		},
		onLoad() {
			setTimeout(() => {
				this.WindowInfo = uni.getWindowInfo()
			}, 100)
			this.getFriendsList();
		},
	};
</script>

<style lang="scss" scoped>
	.newfriend-module {
		box-sizing: border-box;

		.recently {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24upx;
			font-weight: 400;
			color: #878787;
			text-align: center;
		}

		.item {
			padding: 20upx 30upx;
			border-bottom: 2upx solid #f6f6f6;
			display: flex;
			align-items: center;
			background: #ffffff;
			justify-content: space-between;

			.name-view {
				display: flex;
				align-items: center;
			}

			.friends-icon {
				width: 80upx;
				height: 80upx;
				background: linear-gradient(0deg, #fd644f 0%, #f28e26 100%);
				border-radius: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: 30upx;
				font-weight: 400;
				color: #ffffff;
			}

			.userName {
				font-size: 30upx;
				font-weight: 400;
				color: #000000;
				margin-left: 33upx;
			}

			.time {
				font-size: 24upx;
				font-weight: 400;
				color: #878787;
			}
		}
	}
</style>